import { defineComponent, onMounted, ref } from 'vue';
import { QulificationAnalysisAPI } from '@/service/api/QualificationDetailAPI';
import { QualificationMap } from '@config/map';
import { RegionDistribution } from '@common/index';
import QualificationCompanyList from './QualificationCompanyList';
import './style.scss';

export default defineComponent({
  name: 'QualificationDetail',
  setup() {
    const qualificationType: string = sessionStorage.getItem('qualificationType') ?? '-';
    const distributionData: any = ref([]);
    const title: any = ref('-');

    onMounted(async () => {
      switch (qualificationType) {
        case '专精特新小巨人国家级':
          title.value = '国家级专精特新小巨人企业';
          break;
        case '专精特新小巨人省级以上':
          title.value = '省级（含）及以上专精特新小巨人企业';
          break;

        default:
          title.value = QualificationMap.find((q) => q.code === qualificationType)?.label;
          break;
      }

      distributionData.value = await QulificationAnalysisAPI(
        {
          filter: {
            region: {
              province: '江苏省', //省份
              city: '苏州市', //市
              district: null, //区
            },
            qualifications: qualificationType === '科创企业' ? [] : [qualificationType], //筛选 企业资质
          },
          groupby: ['district'],
          aggregate: {
            district: 'count',
          },
        },
        qualificationType
      );
    });

    return { title, qualificationType, distributionData };
  },
  render() {
    return (
      <div id="QualificationDetail">
        <main>
          <RegionDistribution title={this.title} data={this.distributionData}></RegionDistribution>

          <QualificationCompanyList
            qualificationType={this.qualificationType}
            title={this.title}
          ></QualificationCompanyList>
        </main>
        <footer></footer>
      </div>
    );
  },
});
